<!-- 知识库-折叠面板 -->
<template name="toolCollapse">
	<view class="tool-collapse">
		<view class="tool-collapse-title" @click="changeState()">
			<text class="num short-text">{{data.index}}</text>
			<text class="text short-text">{{data.title}}</text>
			<text :class="'state '+(collapseState?'show':'hide')" :style="[durationStyle]"></text>
		</view>
		<view class="tool-collapse-content-box" :style="[boxStyle,durationStyle]">
			<text class="tool-collapse-content">{{data.content}}</text>
		</view>
	</view>
</template>

<script>
	import {
		setTimeout
	} from 'timers'
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {
						index: '',
						title: '',
						content: ''
					}
				}
			},
			// 动画时长：单位毫秒
			duration: {
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				collapseState: false, // 展开收缩状态
				contentHeight: 0, // box的实际高度
				boxHeight: 0, // box的实时高度
			}
		},
		mounted() {
			// 手机卡顿会造成js报错，无法进行展开收缩
			setTimeout(() => {
				let view = uni.createSelectorQuery().in(this).select(".tool-collapse-content")
				view.boundingClientRect((data) => {
					this.contentHeight = data.height; // 得到的是px值
				}).exec();
			}, 50)
			// 处理配置
		},
		computed: {
			durationStyle() {
				return {
					transition: 'all ' + (this.duration / 1000) + 's'
				}
			},
			boxStyle() {
				return {
					height: this.boxHeight + 'px',
				}
			},
		},
		methods: {
			changeState() {
				if (this.collapseState) {
					this.collapseState = false;
					this.boxHeight = 0
				} else {
					this.collapseState = true;
					this.boxHeight = this.contentHeight
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.tool-collapse {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #DDDDDD;

		.tool-collapse-title {
			display: flex;
			padding: 20rpx 0;
			line-height: 32rpx;
			align-items: start;

			.num {
				background-color: #007AFF;
				color: #fff;
				font-size: 28rpx;
				border-radius: 8rpx;
				padding: 0 8rpx;
				margin-right: 10rpx;
			}

			.text {
				flex: 1;
				word-break: break-all;
			}

			.state {
				background: url('@/static/image/left_icon.png') no-repeat center;
				background-size: contain;
				width: 32rpx;
				height: 32rpx;

				&.show {
					transform: rotate(90deg);
				}

				&.hide {
					transform: rotate(-90deg);
				}
			}
		}

		.tool-collapse-content-box {
			overflow: hidden;
		}

	}
</style>
